<template>
    <div>
      <nav>
        <ul>
          <li :class="btn1" @click="toInventory()">未就诊</li>
          <li :class="btn2" @click="toBatch()">已就诊</li>
        </ul>
      </nav>
      <!-- 下面是否显示 -->
      <vue1 v-if="flag" />
      <vue2 v-if="!flag" />
      <!-- <router-view></router-view> -->
    </div>
  </template>
  <script setup lang="ts">
  import { ref, reactive } from "vue";
  import vue1 from "@/views/Treat/TreatList/NotTreat.vue";
  import vue2 from "@/views/Treat/TreatList/Treated.vue";
  let btn1 = ref("btnOne");
  let btn2 = ref("btnTwo");
  const flag = ref(true);
  
  const toInventory = () => {
    btn1.value = "btnOne";
    btn2.value = "btnTwo";
    flag.value = true;
  };
  const toBatch = () => {
    btn1.value = "btnTwo";
    btn2.value = "btnOne";
    flag.value = false;
  };
  </script>
  <style scoped>
  ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    height: 45;
    list-style: none;
    text-align: center;
  }
  ul li {
    width: 227px;
    height: 44px;
    line-height: 44px;
    background-color: #e5e5e5;
    color: #676a6d;
    /* text-decoration: none; */
  }
  .btnOne {
    background-color: #00aaff;
    color: white;
  }
  .btnTwo {
    background-color: #e5e5e5;
    color: #676a6d;
  }
  nav{
    margin-bottom: 20px;
  }
  </style>
  